<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/jquery.mobile-1.4.5.min.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>header</h1>
        </div>
        <div data-role="main" class="ui-content">
            <h1>main</h1>
            <table data-role="table" class="ui-responsive">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>NAME</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <th>jack</th>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>mike</td>
                    </tr>
                </tbody>
            </table>
            <table
                    data-role="table"
                    data-mode="columntoggle"
                    class="ui-responsive ui-shadow"
                    data-column-btn-text="(¦3[▓▓] 晚安"
            >
                <thead>
                <tr>
                    <th data-priority="6">CustomerID</th>
                    <th>CustomerName</th>
                    <th data-priority="1">ContactName</th>
                    <th data-priority="2">Address</th>
                    <th data-priority="3">City</th>
                    <th data-priority="4">PostalCode</th>
                    <th data-priority="5">Country</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>Alfreds Futterkiste</td>
                    <td>Maria Anders</td>
                    <td>Obere Str. 57</td>
                    <td>Berlin</td>
                    <td>12209</td>
                    <td>Germany</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Antonio Moreno Taquer</td>
                    <td>Antonio Moreno</td>
                    <td>Mataderos 2312</td>
                    <td>Mico D.F.</td>
                    <td>05023</td>
                    <td>Mexico</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Around the Horn</td>
                    <td>Thomas Hardy</td>
                    <td>120 Hanover Sq.</td>
                    <td>London</td>
                    <td>WA1 1DP</td>
                    <td>UK</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Berglunds snabbk</td>
                    <td>Christina Berglund</td>
                    <td>Berguvsven 8</td>
                    <td>Lule</td>
                    <td>S-958 22</td>
                    <td>Sweden</td>
                </tr>

                </tbody>
            </table>
        </div>
        <div data-role="footer">
            <h1>footer</h1>
        </div>
    </div>
</body>
</html>